<style>
/* 车辆通行信息  */
	.trafficInfo .hint-text{
		width:33%;
		margin:0 0 10px 0;
	}
    .trafficInfo .carNub{
		border:0;
		background:transparent;
	}
	
/* 进出历史 */
	.fishBoneInfo{
		width:100%;
		float:left;
        border:1px solid #ddd;
        box-shadow:0 0 2px rgba(0,0,0,.3)
	}
	.fishBoneInfo .left{
		width:320px;
		float:left;
		height:100%;
		border-right:1px solid #ddd;
	}
	.fishBoneInfo .right{
		width:calc(100% - 320px - 1px);
		float:left;
		height:180px;
		overflow-y:auto;
	}
	.fishBoneInfo .left ul li{
		float:left;
		width:100%;
		line-height:35px;
		text-indent:20px;
	}
	.fishBoneInfo .left ul li:nth-child(even){
	    background:#f9f9f9;
	}
	.fishBoneInfo .right table tr th{
	    background-image:-moz-linear-gradient(#f3f3f3, #e3e3e3);
		background-image:-ms-linear-gradient(#f3f3f3, #e3e3e3);
		background-image:-webkit-linear-gradient(#f3f3f3, #e3e3e3);
		background-image:-o-linear-gradient(#f3f3f3, #e3e3e3);
		background-image:linear-gradient(#f3f3f3, #e3e3e3);
		height:35px;
		line-height:35px;
		border-bottom:1px solid #ddd;
	}
	.fishBoneInfo .right table tr td{
	    line-height:35px;
	    text-align:center;
	}
	
/* 图片信息 */
	.imgInfo{
		width:100%;
		height:100%;
		overflow-y:auto;
	}
	.imgInfo ul li{
		float:left;
		text-align:center;
		padding:0 10px;
	}
	.imgInfo ul li .imgInfoBox{width:400px;height:320px;display:inline-block;overflow:hidden;padding:10px}
	.imgInfo ul li .imgInfoBox::after{content: "";height: 100%;display: inline-block;vertical-align: middle}
	.imgInfo ul li .imgInfoBox img{vertical-align:middle}
	.imgInfoStyle{border: 1px solid #0888d6;border-radius: 5px; display:inline-block; margin:10px;}
	.imgInfoName{font-size:16px;font-weight:bold;color:#0888d6;margin-left:30px;padding:0 10px}
	.pageContent {width: 400px;	height: 320px;overflow: hidden;position:relative;}

</style>

<div id="inoutRecoder_template_edit_frame">
	<input type="hidden" data-bind="value:id"/>
	<div class="hint-content step three">
		<div class="step-heads">
			<div class="step-head" data-no="1" style="height: 40px;">
				<div class="step-title">车辆通行信息</div>
			</div>
			<div class="step-head " data-no="2" style="height: 40px;">
				<div class="step-title">进出历史</div>
			</div>
			<div class="step-head " data-no="3" style="height: 40px;">
				<div class="step-title">图片信息</div>
			</div>
		</div>
		<div class="step-content" style="height: 550px;overflow-y:auto">
			<div class="step-content-item" data-on="1" style="padding: 10px;">
				<div class="one-case trafficInfo" style="width: 100%;">
					<div class="layerTitle left" style="float:left"><span>基本信息</span></div>
					<div style="float:left;width:100%">
						<div class="hint-text">
							<label>凭证编号：</label> <span data-bind="text:uniqueIdentifier"></span>
						</div>
						<div class="hint-text">
							<label>车牌号码：</label><input class="carNub" id="vehicleNoSpan" disabled="disabled" type="text" data-bind="value:vehicleNo" required/>
						</div>
						<div class="hint-text">
							<label>车辆颜色：</label> <span data-bind="text:carColor"></span>
						</div>
						<div class="hint-text">
							<label>电子车牌号：</label> <span data-bind="text:carEcNo"></span>
						</div>
						<div class="hint-text">
							<label>凭证类型：</label> <span data-bind="text:credentialsName"></span>
						</div>
						<div class="hint-text">
							<label>进出状态：</label> <span data-bind="text:recodeStatus"></span>
						</div>
					</div>
					<div class="layerTitle left" style="float:left"><span>入场信息</span></div>
					<div style="float:left;width:100%">
						<div class="hint-text">
							<label>入场方式：</label> <span data-bind="text:inParkType"></span>
						</div>
						<div class="hint-text">
							<label>入场值班员：</label> <span data-bind="text:inUname"></span>
						</div>
						<div class="hint-text">
							<label>欢迎语：</label> <span data-bind="text:inLedInfo"></span>
						</div>
						<div class="hint-text">
							<label>入场工作站：</label> <span data-bind="text:wsnInName"></span>
						</div>
						<div class="hint-text">
							<label>入场通道：</label> <span data-bind="text:chnInName"></span>
						</div>
						<div class="hint-text">
							<label>入场区域：</label> <span data-bind="text:parInName"></span>
						</div>
						<div class="hint-text">
							<label>入场设备：</label> <span data-bind="text:equInName"></span>
						</div>
						<div class="hint-text">
							<label>入场时间：</label> <span data-bind="text:inTime"></span>
						</div>
					</div>

					<div id="showOut" style="width:100%;float:left">
						<div class="layerTitle left" style="float:left"><span>出场信息</span></div>

						<div class="hint-text">
							<label>出场方式：</label> <span data-bind="text:outParkType"></span>
						</div>
						<div class="hint-text">
							<label>收费员：</label> <span data-bind="text:ouUname"></span>
						</div>
						<div class="hint-text">
							<label>欢送语：</label> <span data-bind="text:outLedInfo"></span>
						</div>
						<div class="hint-text">
							<label>出场工作站：</label> <span data-bind="text:wsnOutName"></span>
						</div>
						<div class="hint-text">
							<label>出场通道：</label> <span data-bind="text:chnOutName"></span>
						</div>
						<div class="hint-text">
							<label>出场区域：</label> <span data-bind="text:parOutName"></span>
						</div>
						<div class="hint-text">
							<label>出场设备：</label> <span data-bind="text:equOutName"></span>
						</div>
						<div class="hint-text">
							<label>出场时间：</label> <span data-bind="text:outTime"></span>
						</div>
					</div>

					<!--<div class="hint-text">
						<label>入场图片可信度：</label> <span data-bind="text:inImgTrust"></span>
					</div>
					<div class="hint-text">
						<label>出场图片可信度：</label> <span data-bind="text:outImgTrust"></span>
					</div>-->
					<div id="showCharge">
						<div class="layerTitle left" style="float:left"><span>缴费信息</span></div>

						<div class="hint-text">
							<label>收费金额：</label> <span data-bind="text:chargeMoney"></span>
						</div>
						<div class="hint-text">
							<label>应收金额：</label> <span data-bind="text:dueMoney"></span>
						</div>
						<div class="hint-text">
							<label>优惠金额：</label> <span data-bind="text:preMoney"></span>
						</div>
						<!--<div class="hint-text">
							<label>超时收费金额：</label> <span data-bind="text:overtimesfje"></span>
						</div>
						<div class="hint-text">
							<label>预缴金额：</label> <span data-bind="text:advanceMoney"></span>
						</div>
						<div class="hint-text">
							<label>支付方式：</label> <span data-bind="text:payMethodName"></span>
						</div>
						<div class="hint-text">
							<label>支付平台：</label> <span data-bind="text:platform"></span>
						</div>-->
					</div>
				</div>

			</div>
			<div class="step-content-item" data-on="2" style="padding: 10px;display:inline-block">
				<div class="fishBone"></div>
				<div class="fishBoneInfo">
					<div class="left">
						<ul id="count">
						</ul>
					</div>
					<div class="right">
						<table width="100%">
							<thead>
							<tr>
								<th width="20%">优惠项目</th>
								<th width="20%">优惠前金额</th>
								<th width="20%">优惠金额</th>
								<th width="20%">优惠方式</th>
								<th width="20%">收费标准</th>
							</tr>
							</thead>
							<tbody id="preBody">
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<div class="step-content-item" data-on="3" style="padding: 10px;display:inline-block" id="gpcimgs">
			</div>
		</div>
	</div>
	<div class="basicInfo-btn" id="showSave">
		<button class="save" data-bind="click:saveInfo">保存</button>
	</div>
</div>
<script type="text/javascript" src="views/parkLotCenter/recordMarket/js/inoutRecodeView.js"></script>
<script src="views/parkLotCenter/recordMarket/js/e-smart-zoom-jquery.min.js"></script>
<script src="views/parkLotCenter/recordMarket/js/fishBone.js"></script>
<script src="views/parkLotCenter/recordMarket/js/jquery.SuperSlide.2.1.1.js"></script>
<!-- tab切换 -->
<script>
    var inoutRecoderEdit = new InoutRecoderEdit(
        $('#inoutRecoder_template_edit_frame'));

</script>
